<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessageBox } from 'element-plus'
import post from '../../lib/post' //引入封装请求
import FormItemText from '@/components/FormItemText.vue' // 引入封装的组件
import {
  AreaSelector,
  AreaSelectorResultDto,
} from '@luohc92/vue3-area-selector' // 引入地址选择器

// 数据
const dialogVisible = ref(false)
const emit = defineEmits(['refreshList']) // defineEmits返回一个方法用来发送事件
const type = ref('') //储存弹窗的类型
let record: any // 保存一个临时变量
const form: {
  phone: string
  name: string
  password: string
  region: string
  date1: any
  date2: any
  delivery: any
  skill: any
  gender: any
  desc: string
  email: any
  head: any
  authority: any
  native: any
} = reactive({
  phone: '',
  name: '',
  password: '',
  region: '',
  date1: '',
  date2: '',
  delivery: '',
  skill: '',
  gender: '',
  desc: '',
  email: '',
  head: '',
  authority: [],
  native: '', // 籍贯
})

const AUTHORITIES = {
  // 一般常量使用大写
  0: '查看人员',
  1: '管理人员',
  2: '查看角色',
  3: '管理角色',
  4: '查看组织',
  5: '管理组织',
  6: '查看商品',
  7: '管理商品',
  8: '查看自提点',
  9: '管理自提点',
}
const fromRef = ref()

// 函数
const showCreate = () => {
  type.value = 'create'
  dialogVisible.value = true
}
const showModify = (index: number, row: any) => {
  // console.log();
  record = row
  ;(form.phone = row.phone),
    (form.name = row.name),
    (form.password = row.password),
    (form.authority = row.authority),
    (form.region = row.region)
  form.date1 = row.date1
  form.date2 = row.date2
  form.delivery = row.delivery
  form.skill = row.skill
  form.gender = row.gender
  form.desc = row.desc
  form.email = row.email
  form.head = row.head
  form.native = row.native
  type.value = 'modify'
  dialogVisible.value = true
}
const submitCreate = async () => {
  // 提交新增

  // 验证
  await fromRef.value.validate() // 如果验证失败会抛出异常

  const data: any = await post('/create/member', {
    ...form,
    $uniq: 'phone',
  })
  if (!data.success) {
    return ElMessageBox.alert(data.message)
  }
  emit('refreshList')

  form.name = ''
  form.phone = ''
  form.password = ''
  form.email = ''
  form.head = ''
  form.password = ''
  form.region = ''
  form.date1 = ''
  form.date2 = ''
  form.delivery = ''
  form.skill = ''
  form.gender = ''
  form.desc = ''
  form.authority = ''
  form.native = ''

  dialogVisible.value = false
}

const submitModify = async () => {
  // 验证
  await fromRef.value.validate() // 如果验证失败会抛出异常
  console.log(form)

  // 发起请求
  const data: any = await post('/modify/member', {
    // 一般使用扩展符添加属性
    id: record.id,
    ...form,
  }) // 直接提交form
  // console.log('=================data', data);
  if (!data.success) {
    // 错误处理
    // return alert(data.message);
    return ElMessageBox.alert(data.message)
  }
  // 通知父组件刷新列表
  emit('refreshList')
  dialogVisible.value = false // 关闭弹窗
}

// 上传头像
// const onUploadSuccess = (res: any) => {
//     const url = 'http://localhost:5188' + res.result.url
//     form.head = url
// }

defineExpose({ showCreate, showModify })
</script>

<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="type === 'create' ? '新增人员' : '修改人员'"
      width="40%"
    >
      <el-form ref="fromRef" :model="form" label-width="120px">
        <FormItemText
          :form="form"
          type="name"
          label="姓名"
          prop="name"
          required
          rule="name"
          length="4"
        />

        <!-- 姓名 -->
        <FormItemText
          :form="form"
          type="phone"
          label="手机号"
          prop="phone"
          required
          rule="phone"
          length="11"
        />

        <!-- 密码 -->
        <FormItemText
          :form="form"
          type="password"
          label="密码"
          prop="password"
          required
          rule="password"
          length="8"
        />

        <!-- 邮箱 -->
        <FormItemText
          :form="form"
          type="email"
          label="邮箱"
          prop="email"
          required
          rule="email"
        />

        <!-- 省份 -->
        <el-form-item
          label="省份"
          prop="region"
          :rules="[{ required: true, message: '请选择城市' }]"
        >
          <el-select v-model="form.region" placeholder="请选择你的城市">
            <el-option label="上海" value="shanghai" />
            <el-option label="北京" value="beijing" />
          </el-select>
        </el-form-item>

        <!-- 籍贯 -->

        <!-- 权限 -->
        <el-form-item
          label="角色权限"
          prop="authority"
          :rules="[{ required: true, message: '请选择权限' }]"
        >
          <el-select
            v-model="form.authority"
            multiple
            placeholder="请选择权限"
            style="width: 240px"
          >
            <el-option
              v-for="(item, key) in AUTHORITIES"
              :key="key"
              :label="item"
              :value="+key"
            />
          </el-select>
        </el-form-item>

        <!-- 选自日期 -->
        <el-form-item
          label="选择日期"
          prop="date1"
          :rules="[{ required: true, message: '请选择日期' }]"
        >
          <el-col :span="11">
            <el-date-picker
              v-model="form.date1"
              type="date"
              placeholder="请选择日期"
              style="width: 100%"
            />
          </el-col>
          <el-col :span="1" class="text-center">
            <span class="text-gray-500">&nbsp;&nbsp;-&nbsp;&nbsp;</span>
          </el-col>
          <el-col :span="11">
            <el-time-picker
              v-model="form.date2"
              placeholder="请选择时间"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>

        <!-- 拨动按钮 -->
        <el-form-item label="是否开启模式">
          <el-switch v-model="form.delivery" />
        </el-form-item>

        <!-- 选择技能 -->
        <!-- <el-form-item label="选择技能" prop="skill" :rules="[
                    { required: true, message: '请选择技能' }]">
                    <el-checkbox-group v-model="form.skill">
                        <el-checkbox label="CSS" name="CSS" />
                        <el-checkbox label="HTML" name="HTML" />
                        <el-checkbox label="JavaScript" name="JavaScript" />
                        <el-checkbox label="NodeJs" name="NodeJs" />
                        <el-checkbox label="Vue" name="Vue" />
                        <el-checkbox label="React" name="React" />
                    </el-checkbox-group>
                </el-form-item> -->

        <!-- 性别 -->
        <el-form-item
          label="性别"
          prop="gender"
          :rules="[{ required: true, message: '请选择性别' }]"
        >
          <el-radio-group v-model="form.gender">
            <el-radio label="男" />
            <el-radio label="女" />
          </el-radio-group>
        </el-form-item>

        <!-- 文本域 -->
        <el-form-item label="备注">
          <el-input v-model="form.desc" type="textarea" />
        </el-form-item>

        <!-- 头像 -->
        <FormItemImage
          :form="form"
          type="head"
          label="头像"
          prop="head"
          required
          rule="head"
        />
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            @click="
              ;(dialogVisible = false), (form.name = '')
              form.phone = ''
              form.authority = ''
              form.password = ''
            "
            >关闭</el-button
          >
          <el-button
            v-if="type === 'create'"
            type="primary"
            @click="submitCreate()"
          >
            确认
          </el-button>
          <el-button v-else type="primary" @click="submitModify()">
            确认
          </el-button>
        </span>
      </template>

      <!-- 籍贯 -->
      <el-form-item label="籍贯">
        <AreaSelector v-model="form.native"></AreaSelector>
      </el-form-item>
    </el-dialog>
  </div>
</template>

<style scoped>
.upload {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #d3d3d3;
}

.upload-icon {
  width: 80px;
  height: 80px;
  font-size: 40px;
}

.head {
  width: 100px;
  height: 100px;
}
:global(.area-selector-panel){
    z-index: 999999 !important ;
}
</style>
